<template>
 <div class="login_container">
 <div class="login_box">
<el-card class="box-card">
<div class="avatar_box">
  <img :src='LoginConfig.imgpath' alt="">
</div>
<el-form  class="login_form" :rules="rules" ref="loginruleForm" :model="LoginForm">
 <el-form-item prop="username">
   <el-input :prefix-icon="LoginConfig.usericon" :clearable="LoginConfig.passwordclearable" v-model="LoginForm.username" >
   </el-input>
 </el-form-item>
 <el-form-item prop="password">
   <el-input :prefix-icon="LoginConfig.passwordicon" show-password :clearable="LoginConfig.usernameclearable"  v-model="LoginForm.password" >
   </el-input>
 </el-form-item>
 <el-form-item >
      
     <el-row :gutter="10">
  <el-col :span="6">
 
<el-tooltip class="item" effect="dark" content="是否保存密码" placement="top-start">
       <el-switch
  v-model="switchConfig.value"
  :active-color="switchConfig.activecolor"
  :inactive-color="switchConfig.inactivecolor">
</el-switch>
    </el-tooltip>
  </el-col>
  

  <el-col :span="6" :offset="10" >
  <el-button
  type="primary"
  style="float:right;width:'75%'"
  @click="subbmit()">登录
  </el-button></el-col>
  
  <el-col :span="2">
 
  <el-dropdown  @command="handleCommand">
  <span class="el-dropdown-link"  style="float:right">
  <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <!-- 登录按钮右侧的-->
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="注册账号">注册账号</el-dropdown-item>
   
    <el-dropdown-item command="前往官网">前往官网</el-dropdown-item>
   
  </el-dropdown-menu>
</el-dropdown>
  
  </el-col>
   
</el-row>
     
 </el-form-item>

  
</el-form>
</el-card>
<!--声明滑动验证区域 嵌套进el的弹窗中-->
<!--外部写el弹窗-->
<el-dialog title="请进行验证" :visible.sync="CodeConfig.CodeVisible" width="75%" height="340px" lock-scroll @close="onRefresh">
<div class="testCode">
  <!--验证码-->
  <slide-verify 
    :l="42"
    :r="2"
    :w="260"
    :h="150"
    slider-text="向右滑动"
    @success="onSuccess"
    @fail="onFail"
    @refresh="onRefresh"
    :style="{width:'260px'}"
    class="slide-box"
    ref="slideBlock"
    
  ></slide-verify>
  <!--信息提示框-->
  <el-alert
    :title="CodeConfig.msg"
    :type="CodeConfig.msgType"
    
    :closable="CodeConfig.msgclosable">
  </el-alert>
 </div>

  
</el-dialog>
</div>


</div>


</template>

<script>
//对外暴露接口
 export default {
name:'Login', 
   data () {
     return {
         LoginConfig:{
             //图片地址
             imgpath:"https://misaka917-1301164487.cos.ap-nanjing.myqcloud.com/2.jpg",
             //用户名图标
             usericon:"el-icon-user",
             //密码图标
             passwordicon:"el-icon-key",
             //是否显示密码
             showpassword:true,
             //是否支持可清空
             usernameclearable:true,
             passwordclearable:true,
             

             //是否开启验证码功能
             iscode:true

         },
         //表单验证
         LoginForm:{
             username:"",
             password:"",
         },
         rules: {
             username:[
                 { required: true, message: '请输入账号', trigger: 'blur'}
             ],
             password:[
                 { required: true, message: '请输入密码', trigger: 'blur'}
             ],

         },
         //验证码相关配置信息
         CodeConfig:{
            //验证码对话框的显示
            CodeVisible:false,
            //验证码下方的对话内容
            msg:"请滑动验证码进行验证",
            //验证码下方的对话类型
            msgType:"info",
            //验证码下方的对话是否支持关闭
            msgcloseble:true
            

         },
         //开关的动态参数配置
         switchConfig:{
             value:true,
             activecolor:"#13ce66",
             inactivecolor:"#ff4949"

         },
         //dropdown的参数配置
         dropdownConfig:{
           //注册功能是否开启
           registerable:true,
           //官网地址
           url:"https://search.bilibili.com/",
           //是否禁止点击
           isclickable:true

         }


         

     }
   },
   created() {
       //页面创建时候需要向服务器索要数据 这个token作为凭证向后台索要配置文件
       var token = this.$root.AdminToken
       let that = this
       let data = {
         AdminToken:token
       }
       this.$axios.post("GetConfig/GetLoginConfigByAdminToken",this.$qs.stringify(data))
       .then(function(Response)
       {
         console.log(Response.data)
         if(Response.data.code == 200){
           
           that.LoginConfig = Response.data.data.LoginConfig
           that.switchConfig=Response.data.data.SwitchConfig
           that.dropdownConfig=Response.data.data.DropDownConfig
           that.$message.success(Response.data.message)
           //检查cookies
         if(that.$cookies.isKey('username')){
               let username = that.$cookies.get('username') 
               let password = that.$cookies.get('password') 
               that.LoginForm.username = username
               that.LoginForm.password = password
               
             }

         }
         else{
            that.$message.error(Response.data.message)
         }
         
       }
       )
       
       
   },
   mounted() {
     
   },
   components: {

   },
   methods:{
        onSuccess(times){
                //console.log(times);
                 // this.msg = 'login success, 耗时${(times / 1000).toFixed(1)}s';
                //
                this.CodeConfig.msgType="success"
                console.log(this.CodeConfig.msgType)
                this.CodeConfig.msg = '验证成功, 耗时'+times/1000+'s 即将进行登录'
                //这里写入登录函数 
                this.LoginAndGetToken()
                 
       



                
                

               
            },
            onFail(){
                console.log('验证不通过');
                this.CodeConfig.msgType="error"
                this.CodeConfig.msg = '验证不通过'
                
            },
            onRefresh(){
                this.CodeConfig.msg = '请滑动验证码进行验证'
                this.CodeConfig.msgType="info"

                console.log('点击了刷新小图标');
               
            },
            onFulfilled() {
                this.CodeConfig.msg = '请滑动验证码进行验证'
                this.CodeConfig.msgType="info"

                console.log('刷新成功啦！');
            },
           
            handleClick() {
                this.CodeConfig.msg = '请滑动验证码进行验证'
                 this.CodeConfig.msgType="info"
                this.$refs.slideblock.reset();
            },
            //点击登录按钮
            subbmit(){
                //验证码之前需要进行表单完整性的检查
                let that = this;
                this.$refs.loginruleForm.validate((valid) => {
                     if (valid) {
                        //确定开启了验证码
                        if(that.LoginConfig.iscode){
                          that.CodeConfig.CodeVisible=true
                          //登录功能需要到验证码成功的回调函数中写
                        }
                         
                            } 
                      else {
                         return false;
                   }
                  });
                
            },
            LoginAndGetToken(){
              let that = this
              let data = {
                username:this.LoginForm.username,
                password:this.LoginForm.password,
         
                    }
       this.$axios.post("api/Login",this.$qs.stringify(data))
       .then(function(Response)
       {
         
         if(Response.data.code == 200){
           
           let token = Response.data.data.token;
           console.log(token)
           sessionStorage.setItem('token', token);
           that.$message.success(Response.data.message)
           //登录成功 看是否记住密码被勾上了
           if(that.switchConfig.value){
             //勾选上了
             that.$cookies.set('username',that.LoginForm.username)
             that.$cookies.set('password',that.LoginForm.password)
           }
           else{
             if(that.$cookies.isKey('username')){
               that.$cookies.remove('username') 
               that.$cookies.remove('password') 
               console.log('cookies清除成功')
             }

           }
           //跳转到main 带值跳转
           that.$router.push({name: 'main',params:{name:that.LoginForm.username}});

         }
         else{
            that.$message.error(Response.data.message)
         }
       }
       )
              

            },
            //下拉列表的触发
            handleCommand(command) {
               if(command == "前往官网"){
                 window.open(this.dropdownConfig.url)
               }
             },
            
   },
 }
</script>

<style scoped>

.login_container{
    background-color:#2b4b6b;
    height:100%;
    
}
.login_box{
    width:450px;
    height:300px;
    background-color:#fff;
    border-radius:5px;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 0 3px #ddd;
    


}
.box-card{
    height:100%
}
.avatar_box{
        height:100px;
        width:100px;
        border-radius:50%;
        padding:10px;
        position:absolute;
        left:50%;
        transform:translate(-50%,-50%); 
        box-shadow:0 0 100px #ddd;
        background-color:#fff

    }
img{
            width:100%;
            height:100%;
            border-radius:50%;
            background-color:#eee
        }
.btns{
    margin-right:20px
    
    
    

   
}
.login_form{
    position:absolute;
    bottom:0;
    width:90%;
    padding:0,50px;
    box-sizing:border-box;
}
 .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }

 
</style>
